<template>
	<div :style="{ ...getTextStyle(props[0].fields) }" class="timeArea">
		{{ currentTime }}
	</div>
</template>

<script>
import moment from "moment";
import { ALIGNMENT } from "../../../common/js/vars";
export default {
	name: "CTime",
	props: {
		props: {
			type: Array,
			default: function() {
				return [
					{
						fields: [],
					},
				];
			},
		},
	},
	computed: {
		currentTime() {
			return moment().format("YYYY-MM-DD HH:mm:ss");
		},
	},
	methods: {
		getTextStyle(item) {
			let lineHeight = item[3].value[0].value.value;
			let alignment = item[3].value[1].value.value;
			let fontSize = item[3].value[2].value.value;
			let fontColor1 = item[3].value[3].value.value[0];
			let fontColor2 = item[3].value[3].value.value[1];
			let fontFamily = item[3].value[4].value.value;
			return {
				"line-height": lineHeight + "px",
				"text-align": ALIGNMENT[alignment],
				"font-size": fontSize + "px",
				"font-family": fontFamily,
				"background-image": `linear-gradient(135deg, ${fontColor1}, ${fontColor2})`,
			};
		},
	},
};
</script>
<style lang="stylus" scoped>
.timeArea {
	font-weight: bolder;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
</style>
